<template>
	<view class="container">
		<Header>联系群众</Header>
		<view class="content">
			<view class="title">
				{{ data.title }}
			</view>
			<view class="date">
				<span>{{ data.createtime }}</span>
			</view>
			<view v-html="data.content"></view>
			<view >
				<image :src="url" v-for="(url, index) in data.meet_files" :key="index" mode="aspectFit" style="width: 100%;margin: 5px 0px;"></image>
			</view>
		<view class="bottom">
			<view class="btn sign_in" :class="{'disabled': data.signStatus != 1}" @click="scanCode">扫码签到</view>
			<view class="btn leave" :class="{'disabled': data.signStatus != 1}" @click="askLeave">我要请假</view>
			<view class="btn report" @click="toPage()">活动报告</view>
		</view>
		</view>
	</view>
</template>

<script>
import Header from '../../components/header.vue'
import request from '../../common/request.js'
export default {
	components: {
		Header
	},
	data() {
		return {
			id: '',
			data: {}
		}
	},
	onLoad(option) {
		this.id = option.id
	},
	mounted() {
		this.getDetailData()
	},
	methods: {
		toPage() {
				uni.navigateTo({
					url: `/pages/resumption/meetingReport?id=${this.id}`
				})
			},
			attendMetting() {
				let time = new Date().getTime()
				let startTime = new Date(this.data.start_time).getTime()
				let endTime = new Date(this.data.end_time).getTime()
				if (time > endTime) {
					uni.showModal({
						content: '会议已结束',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				}
				if (time > startTime) {
					uni.showModal({
						content: '会议已开始',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				}
				uni.showModal({
					content: '确认要参加会议吗？',
					success: (res) => {
						if (res.confirm) {
							this.signIn(this.id, 'attend')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getUrlParams(href, name) {
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
				if (reg.test(href)) {
					return unescape(RegExp.$2.replace(/\+/g, " "))
				};
				return "";
			},
			scanCode() {
				if(this.data.signStatus == 2){
					uni.showModal({
						content: '您已签到!',
						showCancel: false,
						success: (res) => {
					
						}
					});
					return false
				}else if(this.data.signStatus == 3){
					uni.showModal({
						content: '您已请假!',
						showCancel: false,
						success: (res) => {
					
						}
					});
					return false
				}
				uni.scanCode({
					success: (res) => {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						// uni.navigateTo({
						// 	url: res.result
						// })
						let id = this.getUrlParams(res.path, 'meet_id')
						let type = this.getUrlParams(res.path, 'codeType')
						signIn(id, type, this.data.address, () => {
							this.getDetailData()
						})
					}
				});
			},
			askLeave() {
				if(this.data.signStatus == 2){
					uni.showModal({
						content: '您已签到!',
						showCancel: false,
						success: (res) => {
					
						}
					});
					return false
				}else if(this.data.signStatus == 3){
					uni.showModal({
						content: '您已请假!',
						showCancel: false,
						success: (res) => {
					
						}
					});
					return false
				}
				uni.showModal({
					content: '确认要请假吗？',
					success: (res) => {
						if (res.confirm) {
							request({
								url: '/Lxqz/askLeave',
								data: {
									meet_id: this.id,
									codeType: 'masses'
								},
								method: 'POST'
							}).then(res => {
								uni.showModal({
									content: res.msg,
									showCancel: false,
									success: function(res) {

									}
								});
								if (res.code == 1) {
									this.data.signStatus = 3
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		getDetailData() {
			request({
				url: '/Lxqz/detail',
				data: {
					masses_id: this.id
				},
				method: 'POST'
			}).then(res => {
				if (res.code == 1) {
					this.data = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	/* background-color: #f9f9f9;
		min-height: calc(100vh - 45px); */
}

.content {
	padding: 20px;
	line-height: 30px;
}

.title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	line-height: 26px;
}

.date {
	font-size: 14px;
	text-align: center;
	margin: 15px 0px;
}

.bottom {
	/* position: sticky;
		bottom: 10px; */
	margin: 10px 0px;
	display: flex;
	align-items: center;
	justify-content: center;

	.item {
		border: 1px solid #e2e2e2;
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0px 15px;

		&.active {
			::v-deep .uni-icons {
				color: #ea5b6a !important;
			}
		}
	}
}

.status {
	color: #fb7a30;
}
.bottom {
		position: sticky;
		bottom: 0;
		padding: 20px 0px;
		background-color: #fff;
		width: 100%;
		text-align: center;

		.btn {
			color: #fff;
			// padding: 10px 20px;
			border-radius: 20px;
			margin: 0px 10px;
			font-size: 14px;
			text-align: center;
			max-width: 120px;
			width: calc(33.33% - 20px);
			height: 40px;
			line-height: 40px;
			display: inline-block;
		}

		.attend {
			background-color: #be3f26;
		}

		.sign_in {
			background-color: #09a884;
			&.disabled{
				background-color: rgba(9,168,132, 0.5);
			}
		}

		.leave {
			background-color: #fb7a30;
			&.disabled{
				background-color: rgba(251,122,48, 0.5);
			}
		}


		.report {
			background-color: #2668be;
		}

	}
</style>